<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>以圆形显示鼠标单击位置</title>
		<style>
			#circle{
				width: 50px;
				height: 50px;
				background:orange;
				border-radius:50% ;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="circle"></div>
		<script>
			var circle=document.getElementById('circle');
			document.onclick=function () {
            var x = event.pageX ;
            var y = event.pageY;
             x=x-circle.offsetWidth/2;
             y=y-circle.offsetWidth/2;
            circle.style.left=x+'px';
			circle.style.top=y+'px';
			};
			
		</script>
	</body>
</html>
